<template>
  <section class="home">
    <nav class="nav">
      <Nav v-model="pageIndex" />
    </nav>
    <section style="flex: 1;--contentLeftWidth:295px;position: relative;">
      <Message :style="styles(0)" />
      <Friend :style="styles(1)" />
    </section>
    <SearchDialog />
  </section>
</template>

<script setup>
import Nav from '../components/Nav.vue'
import { computed, onBeforeMount, onUnmounted } from 'vue'
import { useMainWebSokect } from '@/tool/useWebsokect'
import Message from './Message'
import Friend from './Friend'
import SearchDialog from '@/components/SearchDialog'
import { useStore } from 'vuex';
const store = useStore()
const pageIndex = computed(() => store?.state?.pageIndex)
useMainWebSokect()
const styles = (index) => {
  const css = {
    position: 'absolute',
    zIndex: -9999,
    left: '-200%',
    opacity: 0
  }
  if (index === pageIndex.value) {
    css.zIndex = 0
    css.left = 0
    css.opacity = 1
  }
  return css
}

const pageClose = (e) => {
  if (process.env.NODE_ENV === 'production') {
    window.electronAPI.hide() //这里直接不退出,而是隐藏下来
    e.returnValue = false
  }
}
onBeforeMount(() => {
  window.addEventListener('beforeunload', pageClose)
})

onUnmounted(() => {
  window.removeEventListener('beforeunload', pageClose)
})
</script>
<style lang="less" scoped>
.home {
  background-color: #fff;
  height: 100%;
  display: flex;
  width: 100%;

  &::-webkit-scrollbar {
    display: none;
  }

  .nav {
    width: 100px;
    flex-shrink: 0;
  }

  :deep(.content_left) {
    width: var(--contentLeftWidth);
    flex-shrink: 0;
    height: 100%;
    overflow-y: auto;
    -webkit-app-region: no-drag;
  }

  :deep(.content_right) {
    flex: 1;
    height: 100%;
  }
}
</style>
